<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>银行卡查询</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
    body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #f7fafd; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; background: linear-gradient(180deg, #1a355b 80%, #1976d2 100%); border-radius: 0 18px 18px 0; box-shadow: 2px 0 8px #e3eaf2; padding: 32px 0; margin: 0; display: flex; flex-direction: column; gap: 0; z-index: 100; }
    .sidebar-title { font-size: 26px; font-weight: bold; color: #fff; letter-spacing: 2px; padding: 0 32px 18px 32px; margin-bottom: 10px; border-bottom: 2px solid #fff2; display: flex; align-items: center; gap: 12px; }
    .sidebar ul { list-style: none; padding: 0; margin: 0; }
    .sidebar li { margin: 0 0 8px 0; }
    .sidebar a, .sidebar .sidebar-btn { display: flex; align-items: center; gap: 12px; font-size: 18px; padding: 14px 32px; border-radius: 16px; background: transparent; color: #fff; border: none; transition: 0.2s; text-decoration: none; text-align: left; cursor: pointer; }
    .sidebar a:hover, .sidebar .sidebar-btn:hover, .sidebar .active { background: #fff; color: #1976d2; font-weight: bold; }
    .sidebar .logout { margin-top: 32px; background: #e3eaf2; color: #1976d2; }
    .sidebar .logout:hover { background: #1976d2; color: #fff; }
    .main-content { margin-left: 260px; flex: 1; display: flex; flex-direction: column; align-items: center; background: #f7fafd; min-width: 350px; max-width: 800px; }
    .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px #e3eaf2; padding: 36px 48px 32px 48px; margin: 40px 0 0 0; width: 100%; max-width: 600px; }
    .query-title { color: #1976d2; margin-bottom: 18px; }
    .input-style { border:1.5px solid #b0bec5; border-radius:8px; padding:6px 10px; font-size:15px; width:140px; }
    .input-style:focus { outline:none; border-color:#1976d2; }
    .query-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; margin-bottom:24px; }
    .query-table th, .query-table td { border:1px solid #b0bec5; padding:8px 10px; text-align:center; }
    .query-table th { background:#e3eaf2; color:#1976d2; }
    .query-table tr:nth-child(even) { background:#f7fafd; }
    .query-table tr:hover { background:#e3eaf2; }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-title"><i class="fa-solid fa-credit-card"></i> 银行卡管理</div>
        <ul>
            <li><a class="sidebar-btn" href="/bankcard_add"><i class="fa-solid fa-plus"></i> 添加银行卡</a></li>
            <li><a class="sidebar-btn" href="/bankcard_list"><i class="fa-solid fa-list"></i> 银行卡列表</a></li>
            <li><a class="sidebar-btn" href="/bankcard_update"><i class="fa-solid fa-pen-to-square"></i> 修改银行卡信息</a></li>
            <li><a class="sidebar-btn" href="/bankcard_export"><i class="fa-solid fa-download"></i> 导出银行卡数据</a></li>
            <li><a class="sidebar-btn" href="/bankcard_delete"><i class="fa-solid fa-trash"></i> 删除银行卡</a></li>
            <li><a class="sidebar-btn active" href="{{ url_for('bankcard_query') }}"><i class="fa-solid fa-search"></i> 银行卡查询</a></li>
        </ul>
        <a href="/admin_menu" class="sidebar-btn logout"><i class="fa-solid fa-arrow-left"></i> 返回管理员菜单</a>
    </div>
    <div class="main-content">
        <div class="card">
            <h2 class="query-title"><i class="fa-solid fa-search"></i> 银行卡查询</h2>
            <form method="post" action="/bankcard_query" class="query-form" style="display:grid; grid-template-columns: 1fr 1fr; gap:18px 32px; align-items:center; justify-content:center; background:#f7fafd; border-radius:12px; padding:24px 32px 16px 32px; margin-bottom:24px;">
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">卡号(精确):</label>
                  <input name="cardID" class="input-style">
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">卡号(模糊):</label>
                  <input name="cardID_like" class="input-style">
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">币种(精确):</label>
                  <input name="curID" class="input-style">
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">储蓄类型(精确):</label>
                  <input name="savingID" class="input-style">
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">开户日期(范围):</label>
                  <div style="display:flex; gap:8px; align-items:center;">
                    <input type="date" name="openDate_min" class="input-style" style="width:120px;">~<input type="date" name="openDate_max" class="input-style" style="width:120px;">
                  </div>
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">开户金额(范围):</label>
                  <div style="display:flex; gap:8px; align-items:center;">
                    <input type="number" name="openMoney_min" class="input-style" style="width:100px;">~<input type="number" name="openMoney_max" class="input-style" style="width:100px;">
                  </div>
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">余额(范围):</label>
                  <div style="display:flex; gap:8px; align-items:center;">
                    <input type="number" name="balance_min" class="input-style" style="width:100px;">~<input type="number" name="balance_max" class="input-style" style="width:100px;">
                  </div>
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  <label style="margin-bottom:4px;">挂失状态(精确):</label>
                  <select name="IsReportLoss" class="input-style" style="width:110px;">
                    <option value="">全部</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                  </select>
                </div>
                <div style="display:flex; flex-direction:column; align-items:flex-start; grid-column:1/3; width:100%;">
                  <label style="margin-bottom:4px;">客户编号(精确):</label>
                  <input name="customerID" class="input-style" style="width:100%;">
                </div>
                <div style="grid-column:2/3; justify-self:end;">
                  <button type="submit" style="height:38px; background:#1976d2; color:#fff; border:none; border-radius:8px; padding:0 32px; font-size:16px; cursor:pointer; margin-top:8px;">查询</button>
                </div>
            </form>
            {% if query_result %}
            <div id="table-container" style="width:100%; overflow-x:auto;">
                <table class="query-table" id="result-table">
                    <thead>
                    <tr>
                        {% for key in query_result[0].keys() %}
                        <th>{{ key }}</th>
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in query_result %}
                    <tr>
                        {% for value in row.values() %}
                        <td>{{ value }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>
    </div>
</body>
</html> 